import {
	getRandomId
} from '@/common/common.js'
export default {
	name: 'BarChartBubble',
	model: {
		prop: 'parentData',
		event: 'onEmitFromChild'
	},
	props: {
		chartTitle: {
			type: String
		},
		parentData: {
			type: Array,
			default: () => {}
		}
	},
	data() {
		return {
			randomId: getRandomId()
		}
	},
	watch: {
		parentData(newData, oldData) {
			this.initChart(newData)
		}
	},
	created() {},
	computed: {},
	mounted() {
		// this.initChart()
	},
	methods: {
		initChart(newData) {
			const echarts = require('echarts')
			const myChart = echarts.init(document.getElementById(this.randomId))
			myChart.clear()
			const option = this.getChartData(newData)
			myChart.setOption(option)
		},
		getChartData(newData) {
			const echarts = require('echarts')
			const dataX = []
			const dataY = []
			newData.forEach(item => {
				dataX.push(item.touristKey)
				dataY.push(Number(item.ratio).toFixed(1))
			})
			// var dataX = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
			// var dataY = [50, 100, 91, 34, 90, 30, 20]
			var markArr = []
			var temObj = null
			dataY.forEach(function(v, i) {
				if (v > 0) {
					temObj = {
						value: v,
						xAxis: i,
						yAxis: v,
						symbolSize: 60
					}
				}
				markArr.push(temObj)
			})
			const option = {
				// dataset: {
				//   source: [
				//     ['product', '2020', '2019'],
				//     ['岛民/驻岛', 59, 3.2],
				//     ['探亲访友', 49, 2.5],
				//     ['跟团游', 51, 3.8],
				//     ['亲子游', 72, 2.1],
				//     ['结伴游', 62, 4.3],
				//     ['情侣游', 20, 2.3],
				//     ['单人游', 50, 2.3]
				//   ]
				// },
				// 图表配置
				tooltip: {
					type: 'item',
					formatter: '{b}<br>占比：{c}%'
				},
				color: ['#00BCFE', '#F03251'],
				grid: {
					top: '23%',
					bottom: '20%',
					left: '10%',
					right: '10%'
				},
				// dataZoom: {
				//   type: 'slider'
				// },
				xAxis: {
					data: dataX,
					type: 'category',
					axisTick: {
						show: false
					},
					axisLabel: {
						color: '#969696',
						interval: 0,
						rotate: 30
					},
					axisLine: {
						lineStyle: {
							color: '#D7D7D7'
						}
					}
				},
				yAxis: {
					axisLine: {
						show: false
					},
					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					axisLabel: {
						show: false
					}
				},
				series: [{
					data: dataY,
					type: 'bar',
					barWidth: '6px',
					smooth: true,
					markPoint: {
						itemStyle: {
							color: '#4472EF'
						},
						label: {
							color: '#ffffff',
							formatter: function(param) {
								return param.value + '%'
							}
						},
						data: markArr
					},
					itemStyle: {
						normal: {
							color: {
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								type: 'linear',
								global: false,
								colorStops: [{
										offset: 0,
										color: '#00BCFE'
									},
									{
										offset: 1,
										color: '#4575EE'
									}
								]
							}
						}
					}
				}]
			}
			return option
		}
	}
}
